<?php
    require_once dirname(__FILE__).'/../../class/farm.class.php';
    require_once dirname(__FILE__).'/../../class/address.class.php';
    $addressObj=new address();
    if(isset($_GET["farmID"])){
        $farmID=$_GET["farmID"];
        $farmObj=new farm($farmID);
        $farm=$farmObj->getFarm();
    }
?>
<script type="text/javascript">
    var geoLocation;
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else { 
            $('#geoLocation').val( "Geolocation is not supported by this browser.");
        }
    }

    function showPosition(position) {
        $('#geoLocation').val(position.coords.latitude + "," + position.coords.longitude);
        geoLocation=position.coords.latitude + "," + position.coords.longitude;
        $('#map-canvas').show();
        setMap();
    }
    var marker;
    var map;

    var myLatlng = new google.maps.LatLng(geoLocation);

    function initialize() {

        var mapOptions = {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: myLatlng
            };
        map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

        marker = new google.maps.Marker({
            map:map,
            draggable:true,
            animation: google.maps.Animation.DROP,
            position: myLatlng
        });

        var markerIcon = {
            url: 'img/markerMedium.png'
        };

        marker.setIcon(markerIcon);


        //google.maps.event.addListener(marker, 'click', toggleBounce);
        google.maps.event.addListener (marker, 'drag', function (event) {
            document.getElementById("geoLocation").value = marker.getPosition().lat()+","+marker.getPosition().lng();
            
        });

        google.maps.event.addListener (marker, 'dragend', function (event) {
            getProvince();
            var point = marker.getPoint();
            map.panTo(point);
        });
        
    }
    
    function getProvince(){
        lat=marker.getPosition().lat();
        lng=marker.getPosition().lng();
        $.get('http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lng+'&sensor=false'
        ,function(data){
            var province=data["results"][0]["address_components"][3]["short_name"];
        });
    }

    function toggleBounce() {
        if (marker.getAnimation() != null){
            marker.setAnimation(null);
        }else{
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);

    function setMap(){
        var temp=geoLocation.split(",");
        myLatlng = new google.maps.LatLng(temp[0],temp[1]);
        initialize();
    }
    
    function formSubmit(){
        var farmName = $('#farmName').val();
        var area = $('#area').val();
        var address = $('#address').val();
        var subDistrictID = $('#subDistrictID').val();
        var districtID = $('#districtID').val();
        var districtName = $('#districtName').val();
        var provinceID = $('#provinceID').val();
        var provinceName = $('#provinceName').val();
        var addressDisplay = $('#addressDisplay').html();
        var geoLocation = $('#geoLocation').val();
        
        if(farmName==''){
            alert('กรุณากรอก \"ชื่อแปลง\"');
            $('#farmName').focus();
        }else if(area==''){
            alert('กรุณากรอก \"พื้นที่\"');
            $('#area').focus();
        }else if(addressDisplay==''){
            alert('กรุณาเลือก \"ตำบล/อำเภอ/จังหวัด\"');
            $('#addressBrowseDIV').show();
        }else if(geoLocation==''){
            alert('กรุณาระบุตำแหน่ง \"พิกัดที่อยู่ของแปลง\"');
            getLocation();
        }else{
            document.getElementById('addFarmForm').submit();
        }
    }
</script>
<style type="text/css">
    #map-canvas {display: none;height: 20cm;width: 100%;background-color: #ccc;}
    #memberMap{
        margin-left: auto;
        margin-right: auto;
        float: none !important;
    }
</style>
<div style="padding: 5px">
    <div class="panel panel-default" style="margin-left: auto;margin-right: auto;">
        <div class="panel-heading">
            <h4>
                <i class="icon-tag"></i> 
                <span class="glyphicon glyphicon-plus"></span>
                เพิ่มแปลง
                <span class="glyphicon glyphicon-remove" style="float: right;cursor: pointer;" onclick="window.open('?page=member/farm/farm&memID=<?=$_GET["memID"]?>','_self')"></span>
            </h4>
        </div>
        <div class="panel-body">
            <form method="post" id="addFarmForm" class="form-horizontal" action="member/farm/addFarm.php">
                <input type="hidden" name="memID" value="<?=$_GET["memID"]?>">
                <input type="hidden" id="farmID" name="farmID" value="<?=$farmID?>">
                <fieldset>
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="farmName">เกษตรกร</label>  
                        <div class="col-md-4" style="padding-top: 7px;">
                            <?=$member["title"]." ".$member["firstName"]." ".$member["lastName"]?>

                        </div>
                    </div>

                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="farmName">ชื่อแปลง</label>  
                        <div class="col-md-4">
                            <input id="farmName" name="farmName" type="text" placeholder="ชื่อแปลง" class="form-control input-md"
                                value="<?=$farm["farmName"]?>"
                                >

                        </div>
                    </div>

                    <!-- Appended Input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="area">พื้นที่</label>
                        <div class="col-md-4">
                            <div class="input-group">
                                <input id="area" name="area" class="form-control" placeholder="พื้นที่" type="text"
                                    value="<?=$farm["area"]?>"
                                    >
                                <span class="input-group-addon">ไร่</span>
                            </div>
                            <p class="help-block">เช่น 4 ไร่</p>
                        </div>
                    </div>
                    <!-- Textarea -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="address">ที่อยู่</label>
                        <div class="col-md-4">                     
                            <textarea class="form-control" id="address" name="address" placeholder="บ้านเลขที่ ตรอก ซอย หมู่บ้าน"><?=$farm["address"]?></textarea>
                            <div id="addressDisplay"><?php
                                if(isset($farm)){
                                    $subDistrict=$addressObj->getSubDistrict($farm["subDistrictID"]);
                                    $district=$addressObj->getDistrict($farm["districtID"]);
                                    $province=$addressObj->getProvince($farm["provinceID"]);
                                    ?>
                                ตำบล <?=$subDistrict["subDistrictName"]?>
                                อำเภอ <?=$district["districtName"]?>
                                จังหวัด <?=$province["provinceName"]?>
                                        <?php
                                }
                            ?></div>
                        </div>
                    </div>

                    <!-- Button -->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="addressBrowse"></label>
                        <div class="col-md-4">
                            <div id="addressBrowse" name="addressBrowse" class="btn btn-default"
                                onclick="
                                    $('#addressBrowseDIV').toggle();
                                "
                                >เลือก ตำบล/อำเภอ/จังหวัด</div>
                            <input type="hidden" id="subDistrictID" name="subDistrictID" value="<?=$farm["subDistrictID"]?>">
                            <input type="hidden" id="subDistrictName" name="subDistrictName">
                            <input type="hidden" id="districtID" name="districtID" value="<?=$farm["districtID"]?>">
                            <input type="hidden" id="districtName" name="districtName">
                            <input type="hidden" id="provinceID" name="provinceID" value="<?=$farm["provinceID"]?>">
                            <input type="hidden" id="provinceName" name="provinceName">
                        </div>
                    </div>

                    <div id="addressBrowseDIV" class="whiteShadow" style="height: 200px;width: 100%;border: 1px solid #aaa;padding: 5px;display: none;">
                        <div class="form-group" style="width: 100%;margin-left: auto;margin-right: auto;">
                            <div class="col-md-4" style="width: 100%;">
                                <div class="input-group" style="width: 100%;">
                                    <span class="input-group-addon">คำค้น</span>
                                    <input id="keyword" class="form-control" placeholder="placeholder" type="text" style="width: 100%;">
                                    <span class="input-group-addon" style="cursor: pointer;"
                                        onclick="showAddress($('#keyword').val())"
                                        >ค้นหา</span>
                                </div>
                            </div>
                        </div>
                        <div id="addressBrowseDisplay" style="height: 136px;overflow: auto"></div>
                    </div>

                    <!-- Appended Input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="cardID">พิกัดที่อยู่ของแปลง</label>
                        <div class="col-md-4">
                            <div class="input-group">
                                <input id="geoLocation" name="geoLocation" class="form-control" placeholder="พิกัดที่อยู่" type="text"
                                    value="<?=$farm["geoLocation"]?>"
                                    >
                                <span class="input-group-addon" onclick="getLocation()" style="cursor: pointer;">
                                    <span class="glyphicon glyphicon-screenshot"></span>
                                    พิกัดปัจจุบัน
                                </span>
                            </div>
                            <p class="help-block">เช่น 18.629098892211914,98.876014709472656</p>
                        </div>
                    </div>

                    <div id="memberMap">
                        <div id="map-canvas"></div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-4 control-label" for=""></label>
                        <div class="col-md-4">
                            <input type="button" id="" name="" class="btn btn-danger" style="float: left;"
                                value="ลบแปลง"
                                onclick="
                                    if(confirm('ต้องการลงแปลงนี้')){
                                        window.open('member/farm/deleteFarm.php?farmID=<?=$farmID?>','_self');
                                    }
                                "
                                >
                            <button id="" name="" class="btn btn-primary" style="float: right;">
                                <span class="glyphicon glyphicon-floppy-disk"></span> บันทึก
                            </button>
                        </div>
                    </div>

                </fieldset>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    function showAddress(keyword){
        $('#addressBrowseDisplay').html('กรุณารอสักครู่');
        $.post('tools/addressBrowse.php',{
            keyword: keyword
        },function(data){
            $('#addressBrowseDisplay').html(data);
        });
    }
    function setAddress(subDistrictID,subDistrictName,districtID,districtName,provinceID,provinceName){
        $('#subDistrictID').val(subDistrictID);
        $('#subDistrictName').val(subDistrictName);
        
        $('#districtID').val(districtID);
        $('#districtName').val(districtName);
        
        $('#provinceID').val(provinceID);
        $('#provinceName').val(provinceName);
        
        $('#addressDisplay').html('ตำบล '+subDistrictName+' อำเภอ '+districtName+' '+provinceName);
        
        $('#addressBrowseDIV').hide();
    }
</script>